<template>
  <div class="exam-generator">
    <ExamHeader />

    <div class="main-content">
      <ExamConfigPanel
        :config="config"
        :canGenerate="canGenerate"
        :isGenerating="isGenerating"
        @updateKnowledgePoints="updateKnowledgePoints"
        @generateExam="handleGenerateExam"
      />

      <ExamPreview
        :currentExamData="currentExamData"
        :examTitle="examTitle"
        :totalQuestions="totalQuestions"
        :choiceQuestions="choiceQuestions"
        :fillQuestions="fillQuestions"
        :answerQuestions="answerQuestions"
        :isGenerating="isGenerating"
        :isStreaming="isStreaming"
        :getScore="getScore"
        @saveTemplate="saveTemplate"
        @exportQuestions="exportWordQuestions"
        @exportWithAnswers="exportWordWithAnswers"
        @newExam="newExam"
      />
    </div>
  </div>
</template>

<script>
import ExamHeader from './components/ExamHeader.vue'
import ExamConfigPanel from './components/ExamConfigPanel.vue'
import ExamPreview from './components/ExamPreview.vue'
import { useExamConfig } from './composables/useExamConfig.js'
import { useExamGeneration } from './composables/useExamGeneration.js'
import { useWordExport } from './composables/useWordExport.js'
import { useConfig } from './composables/useConfig.js'

export default {
  name: 'App',
  components: {
    ExamHeader,
    ExamConfigPanel,
    ExamPreview
  },
  setup() {
    // 使用组合式函数
    const {
      config,
      canGenerate,
      examTitle,
      updateKnowledgePoints,
      resetConfig
    } = useExamConfig()

    const {
      examData,
      isGenerating,
      isStreaming,
      currentExamData,
      totalQuestions,
      choiceQuestions,
      fillQuestions,
      answerQuestions,
      generateExam,
      getScore,
      clearExamData
    } = useExamGeneration()

    const {
      exportWordQuestions,
      exportWordWithAnswers
    } = useWordExport()

    const { getScoreMap } = useConfig()

    // 处理生成试卷
    const handleGenerateExam = async () => {
      if (!canGenerate.value) {
        alert('请完善生成参数')
        return
      }

      try {
        await generateExam(config.value)
      } catch (error) {
        alert('生成试卷失败，请检查网络连接或稍后重试')
      }
    }

    // 导出试题版
    const handleExportQuestions = async () => {
      try {
        await exportWordQuestions(currentExamData.value, examTitle.value)
      } catch (error) {
        alert(error.message)
      }
    }

    // 导出答案版
    const handleExportWithAnswers = async () => {
      try {
        await exportWordWithAnswers(currentExamData.value, examTitle.value)
      } catch (error) {
        alert(error.message)
      }
    }

    // 保存模板
    const saveTemplate = () => {
      if (!examData.value && !currentExamData.value) {
        alert('请先生成试卷')
        return
      }

      const template = {
        config: config.value,
        timestamp: new Date().toISOString()
      }

      localStorage.setItem('exam_template', JSON.stringify(template))
      alert('模板已保存')
    }

    // 新建试卷
    const newExam = () => {
      if (confirm('确定要清空当前配置吗？')) {
        resetConfig()
        clearExamData()
      }
    }

    // 获取分数映射
    const getScoreFromMap = (questionType) => {
      const scoreMap = getScoreMap()
      return scoreMap[questionType] || 0
    }

    return {
      config,
      canGenerate,
      examTitle,
      isGenerating,
      isStreaming,
      currentExamData,
      totalQuestions,
      choiceQuestions,
      fillQuestions,
      answerQuestions,
      updateKnowledgePoints,
      handleGenerateExam,
      exportWordQuestions: handleExportQuestions,
      exportWordWithAnswers: handleExportWithAnswers,
      saveTemplate,
      newExam,
      getScore: getScoreFromMap
    }
  },

  // 组件加载时不再自动加载模板，优先使用新的默认配置
  mounted() {
    console.log('使用新的默认配置:', this.config)
  }
}
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.exam-generator {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  height: 100vh;
  color: #333;
  overflow: hidden;
}

/* 主内容区域 */
.main-content {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  height: calc(100vh - 120px);
}
</style>